<template>
  <div class="smart-analysis">
    <div v-if="hasAnalysis" class="analysis-content">
      <el-tag 
        type="success" 
        size="small"
        effect="dark"
      >
        智能分析完成
      </el-tag>
      <div class="analysis-details">
        <div class="analysis-item" v-for="item in analysisItems" :key="item.type">
          <el-icon :color="item.color"><component :is="item.icon" /></el-icon>
          <span class="analysis-text">{{ item.text }}</span>
        </div>
      </div>
      <el-button 
        type="primary" 
        link 
        size="small" 
        @click="handleAction"
      >
        查看详情
      </el-button>
    </div>
    <div v-else class="no-analysis">
      <el-tag 
        type="info" 
        size="small"
      >
        待分析
      </el-tag>
      <el-button 
        type="primary" 
        link 
        size="small" 
        @click="handleAnalyze"
      >
        立即分析
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { 
  TrendCharts, Warning, Star, InfoFilled, 
  SuccessFilled, CircleCheck 
} from '@element-plus/icons-vue'

interface Props {
  transaction: any
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'analysis-action', analysis: any): void
}>()

const hasAnalysis = computed(() => {
  // 简单检查是否有分析数据
  return props.transaction && props.transaction.analysis
})

const analysisItems = computed(() => {
  if (!props.transaction || !props.transaction.analysis) return []
  
  const analysis = props.transaction.analysis
  const items = []
  
  if (analysis.amountTrend) {
    items.push({
      type: 'trend',
      icon: TrendCharts,
      color: analysis.amountTrend > 0 ? '#52c41a' : '#f5222d',
      text: analysis.amountTrend > 0 ? '金额上升' : '金额下降'
    })
  }
  
  if (analysis.riskLevel) {
    const riskMap = {
      low: { icon: CircleCheck, color: '#52c41a', text: '低风险' },
      medium: { icon: Warning, color: '#faad14', text: '中风险' },
      high: { icon: Warning, color: '#f5222d', text: '高风险' }
    }
    items.push({
      type: 'risk',
      ...riskMap[analysis.riskLevel as keyof typeof riskMap]
    })
  }
  
  if (analysis.isImportant) {
    items.push({
      type: 'important',
      icon: Star,
      color: '#faad14',
      text: '重要交易'
    })
  }
  
  if (analysis.suggestion) {
    items.push({
      type: 'suggestion',
      icon: InfoFilled,
      color: '#1890ff',
      text: analysis.suggestion
    })
  }
  
  return items
})

const handleAction = () => {
  emit('analysis-action', {
    type: 'view-details',
    transaction: props.transaction
  })
}

const handleAnalyze = () => {
  emit('analysis-action', {
    type: 'analyze',
    transaction: props.transaction
  })
}
</script>

<style scoped lang="scss">
.smart-analysis {
  .analysis-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    
    .analysis-details {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      
      .analysis-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        
        .analysis-text {
          color: #606266;
        }
      }
    }
  }
  
  .no-analysis {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}
</style>